<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style>
* {
    margin: 0;
    padding: 0;
}
.hidden {
    display: none;
}
html, body, .page, #part1, #part2, #part3 {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#part1, #part2, #part3 {
    position: absolute;
}
#part1 {
    background: url('images/op.png') no-repeat center center fixed;
    background-size: cover;
    width: 100%;
    height: 100%;
}
#part2 {
    background: url('images/bg.png') no-repeat center center fixed;
    background-size: cover;
    width: 100%;
    height: 100%;
}
.op {
    display: block;
    width: 100%;
    height: 100%;
}
.bg {
    display: block;
    width: 100%;
    height: 100%;
}
#canvas {
    position: absolute;
    top: 0;
}
.pan img {
    position: absolute;
    width: 120%;
    top: 0%;
    left: -10%;
}
.again img {
    position: absolute;
    width: 60%;
    top: 34%;
    left: 20%;
}
.share img {
    position: absolute;
    width: 25%;
    top: 10%;
    right: 3%;
}
.succ img {
    position: absolute;
    width: 60%;
    top: 10%;
    left: 20%;
}
.fail img {
    position: absolute;
    width: 50%;
    top: 10%;
    left: 25%;
}
</style>
<title>标题</title>
</head>
<body>
<img id="egg" src="images/egg.gif" class="hidden" />
<div class="page">
    <div id="part1">
    </div>
    <div id="part2" class="hidden">
        <canvas id="canvas"></canvas>
    </div>
    <div id="part3" class="hidden">
        <div class="pan">
            <img src="images/pan.png" />
        </div>
        <div class="again">
            <img id="retry" src="images/again.png" />
        </div>
        <div class="share">
            <img src="images/share.png" />
        </div>
        <div class="succ">
            <img src="images/txt1.png" />
        </div>
        <div class="fail">
            <img src="images/txt2.png" />
        </div>
    </div>
</div>
<script type="text/javascript">
        document.getElementById("part1").onclick = function() {
            document.getElementById("part1").className = "hidden";
            document.getElementById("part2").className = "";
            requestAnimationFrame(update);
        };

        document.getElementById("retry").onclick = function() {
            document.getElementById("part1").className = "";
            document.getElementById("part2").className = "hidden";
            document.getElementById("part3").className = "hidden";

            isHit = false;
            isDrop = false;
            isStop = false;
            Gravity = {
                x: 0, // 重力x轴分量
                y: 1 // 重力y轴分量
            };
            Egg = {
                x: Width * (1 - 245 / 640 / 2.2) / 2, // 鸡蛋x轴坐标
                y: -Width * 245 / 640 / 2.2, // 鸡蛋y轴坐标
                vx: 0, // 鸡蛋x轴速度
                vy: 0, // 鸡蛋y轴速度
                width: Width * 245 / 640 / 2.2, // 鸡蛋宽度
                height: Width * 245 / 640 / 2.2 // 鸡蛋高度
            };
        };

        var Width = document.documentElement.clientWidth; // 屏幕宽度
        var Height = document.documentElement.clientHeight; // 屏幕高度

        var ratio = Math.max(Width / 640, Height / 1136);
        var xOffset = (ratio * 640 - Width) / 2;
        var yOffset = (ratio * 1136 - Height) / 2;

        var Factor = {
            gravity: 0.4, // 重力系数
        };
        var Gravity = {
            x: 0, // 重力x轴分量
            y: 1 // 重力y轴分量
        };
        var Egg = {
            x: Width * (1 - 245 / 640 / 2.2) / 2, // 鸡蛋x轴坐标
            y: -Width * 245 / 640 / 2.2, // 鸡蛋y轴坐标
            vx: 0, // 鸡蛋x轴速度
            vy: 0, // 鸡蛋y轴速度
            width: Width * 245 / 640 / 2.2, // 鸡蛋宽度
            height: Width * 245 / 640 / 2.2 // 鸡蛋高度
        };
        var Bread = {
            x: 282 * ratio - xOffset, // 面包x轴坐标
            y: 876 * ratio - yOffset, // 面包y轴坐标
            width: 68 * ratio, // 面包宽度
            height: 67 * ratio // 面包高度
        };
        var obj1 = {
            x: 351 * ratio - xOffset,
            y: 285 * ratio - yOffset,
            width: 293 * ratio,
            height: 3 * ratio
        };
        var obj2 = {
            x: -xOffset,
            y: 651 * ratio - yOffset,
            width: 200 * ratio,
            height: 31 * ratio
        };
        var obj3 = {
            x: 431 * ratio - xOffset,
            y: 277 * ratio - yOffset,
            width: 206 * ratio,
            height: 53 * ratio
        };
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        canvas.width = Width;
        canvas.height = Height;

        var egg = document.getElementById("egg"); // 鸡蛋图片

        var isHit = false; // 是否碰撞
        var isDrop = false; // 是否掉落
        var isStop = false; // 是否结束
        var isDebug = false;

        var requestAnimationFrame = window.requestAnimationFrame
            || window.webkitRequestAnimationFrame
            || function(callback) { return setTimeout(callback, 1000 / 60); };

        function draw() { // 每帧绘制
            if (!isDrop)
                ctx.drawImage(egg, Egg.x, Egg.y, Egg.width, Egg.height);
            if (isDebug) {
                ctx.rect(obj1.x, obj1.y, obj1.width, obj1.height);
                ctx.rect(obj2.x, obj2.y, obj2.width, obj2.height);
                ctx.rect(obj3.x, obj3.y, obj3.width, obj3.height);
                ctx.rect(Egg.x, Egg.y, Egg.width, Egg.height);
                ctx.rect(Bread.x, Bread.y, Bread.width, Bread.height);
                ctx.stroke();
            }
        }

        function clear() {
            ctx.clearRect(0, 0, Width, Height);
        }

        function update() {
            clear();
            draw();

            if (isDrop || isStop) return;

            Egg.x += Egg.vx;
            Egg.y += Egg.vy;

            /* 碰撞 */
            if (isHit) {
                isStop = true;

                /* 接住 */
                setTimeout(function(){
                    document.getElementById("part3").classList.remove("hidden");
                    document.getElementsByClassName("succ")[0].classList.remove("hidden");
                    document.getElementsByClassName("fail")[0].classList.add("hidden");
                }, 0);
                return;
            }

            /* 落体 */
            Egg.vx += Gravity.x * Factor.gravity;
            Egg.vy += Gravity.y * Factor.gravity;

            /* 掉落 */
            if (Egg.x < -Egg.width || Egg.x > Width) {
                isDrop = true;
            }
            if (Egg.y < -Egg.height || Egg.y > Height) {
                isDrop = true;
            }

            /* 碰撞检测 */
            if (isCollsionWithRect(Egg.x, Egg.y, Egg.width, Egg.height, Bread.x, Bread.y, Bread.width, Bread.height)) {
                isHit = true;
            }

            /* 障碍 */
            else if (isCollsionWithRect(Egg.x, Egg.y, Egg.width, Egg.height, obj1.x, obj1.y, obj1.width, obj1.height)) {
                isDrop = true;
            }
            else if (isCollsionWithRect(Egg.x, Egg.y, Egg.width, Egg.height, obj2.x, obj2.y, obj2.width, obj2.height)) {
                isDrop = true;
            }
            else if (isCollsionWithRect(Egg.x, Egg.y, Egg.width, Egg.height, obj3.x, obj3.y, obj3.width, obj3.height)) {
                isDrop = true;
            }


            if (isDrop) {
                /* 掉 */
                setTimeout(function(){
                    document.getElementById("part3").classList.remove("hidden");
                    document.getElementsByClassName("fail")[0].classList.remove("hidden");
                    document.getElementsByClassName("succ")[0].classList.add("hidden");
                }, 0);
                return;
            }

            requestAnimationFrame(update);
        }

        /* 矩形碰撞检测 */
        function isCollsionWithRect(x1, y1, w1, h1, x2, y2, w2, h2) {  
            if (x1 >= x2 && x1 >= x2 + w2) {  
                return false;  
            } else if (x1 <= x2 && x1 + w1 <= x2) {  
                return false;  
            } else if (y1 >= y2 && y1 >= y2 + h2) {  
                return false;  
            } else if (y1 <= y2 && y1 + h1 <= y2) {  
                return false;  
            }  
            return true;  
        }

        /* 陀螺仪 */
        window.addEventListener("deviceorientation", orientationHandler, true);  
        function orientationHandler(event) {  
            Gravity = {
                x: event.gamma / 90,
                y: event.beta / 90 / 3
            }
        }
</script>   
</body>
</html>
